<script setup>
import {ref} from 'vue'
import {ElMessageBox, ElMessage} from 'element-plus'
import axios from 'axios'
import Vue3TagsInput from "@/components/Vue3TagsInput/Vue3TagsInput.vue"

const model=defineModel()
const talent_audit=defineModel('talent_audit')

var level2s=[]
talent_audit.value.level2s.map(level2=>{
    level2s.push(level2.name)
  })

//按钮
function handleWithdraw(){
    ElMessageBox.confirm(
        '确认撤回？',
        '警告',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(()=>{
        axios.delete(`/api/talent_audit/${talent_audit.value.user_id}`).then(ret=>{
            ElMessage.success('已将记录撤回！')
            talent_audit.value=null
            model.value=false
        }).catch(e=>{
            switch(e.status){
                case 404:
                    ElMessage.error("审核表中不存在该记录！")
                    break;
                case 500:
                    ElMessage.error("服务器内部错误！")
                    break;
            }
        })
    }).catch((e)=>{})
}
function handleCancle(){
    model.value=false
}

//点击弹窗以外区域，关闭弹窗
const main=ref(null)
function handleClose(e){
    if(!main.value.contains(e.target)){
        model.value=false
    }
}
</script>

<template>
<transition name="el-fade-in-linear">
    <div class="parent" @click.stop="handleClose($event)">
        <div class="child" ref="main">
            <div class="header">
                审核中
            </div>
            <div class="avatar-container">
                <div style="display:flex; flex-direction:column;"> 
                    <el-image style="width:100px; height:130px;" :src="'/minio/talent-avatar/'+talent_audit.photo" fit="fill">
                        <template #error>
                            <div class="avatar"></div>
                        </template>
                    </el-image>
                </div>
            </div>
            <div class="title">
                专家头衔：
            </div>
            <vue3-tags-input
                :tags="talent_audit.titles"
                read-only
                class="tags-readonly"
            />
            <div class="title">
                擅长领域：
            </div>
            <vue3-tags-input
                :tags="level2s"
                read-only
                class="tags-readonly"
            />
            <div class="title">
                成果简介：
            </div>
            <el-input
                v-model="talent_audit.achievements"
                :rows="5"
                type="textarea"
                disabled
            />
            <div class="operations">
                <el-button @click="handleWithdraw" type="danger">撤回</el-button>
                <el-button @click="handleCancle" type="primary">关闭</el-button>
            </div>
        </div>
    </div>
</transition>

</template>

<style lang="scss" scoped>
.parent{
    z-index:100;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color: rgba(128,128,128,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    .child{
        width:300px;
        height:auto;
        background-color: white;
        border-radius:10px;
        box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
        .header{
            padding:5px;
            font-weight:bolder;
            font-size:medium;
            text-align:center;
            color: var(--el-color-white);
            background-color: var(--el-color-primary);
            border-radius:10px 10px 0 0;
        }
        .avatar-container{
          display:flex;
          justify-content:center;
          margin:10px;
          .avatar{
              width:100px;
              height:130px;
              background:url('/img/头像.png') no-repeat center;
          }
          .avatar-edit{
              margin-top:-20px;
              background:gray;
              opacity:0.8;
              width:100px;
              text-align:center;
              color:white;
              font-size:small;
              cursor:pointer;
          }
        }
        .title{
            margin:10px;
        }
        .tags-readonly{
            margin-left:10px;
            width:280px;
            min-height:0px;
            border:0px;
            :deep(.v3ti-tag){
              background-color:var(--el-color-warning);
            }
            :deep(.v3ti-new-tag){
                display:none;
            }
        }
        .el-textarea{
            margin-left:10px;
            width:280px;
            :deep(.el-textarea__inner){
                color:var(--el-color-warning);
            }
        }
        .operations{
            margin:15px 0;
            text-align: center;
        }
    }
}
</style>